<template>
  <view class="container">
    <view class="header">
      <text class="title">📱 使用指南</text>
    </view>

    <view class="guide-section">
      <view class="section-title">
        <text class="section-text">🔋 后台运行设置</text>
      </view>
      <view class="guide-content">
        <text class="guide-text">为确保闹钟能在后台正常工作，请进行以下设置：</text>
        
        <view class="step-item">
          <text class="step-number">1</text>
          <view class="step-content">
            <text class="step-title">电池优化设置</text>
            <text class="step-desc">进入系统设置 → 电池 → 电池优化 → 找到本应用 → 选择"不优化"</text>
          </view>
        </view>

        <view class="step-item">
          <text class="step-number">2</text>
          <view class="step-content">
            <text class="step-title">自启动权限</text>
            <text class="step-desc">进入系统设置 → 应用管理 → 找到本应用 → 开启"自启动"权限</text>
          </view>
        </view>

        <view class="step-item">
          <text class="step-number">3</text>
          <view class="step-content">
            <text class="step-title">后台运行</text>
            <text class="step-desc">进入系统设置 → 应用管理 → 找到本应用 → 开启"后台活动"</text>
          </view>
        </view>

        <view class="step-item">
          <text class="step-number">4</text>
          <view class="step-content">
            <text class="step-title">锁定应用</text>
            <text class="step-desc">在最近任务界面，下拉或点击锁定图标，防止应用被清理</text>
          </view>
        </view>
      </view>
    </view>

    <view class="guide-section">
      <view class="section-title">
        <text class="section-text">🎵 功能说明</text>
      </view>
      <view class="guide-content">
        <view class="feature-item">
          <text class="feature-icon">⏰</text>
          <view class="feature-content">
            <text class="feature-title">智能闹钟</text>
            <text class="feature-desc">支持一次性和重复闹钟，精确到分钟</text>
          </view>
        </view>

        <view class="feature-item">
          <text class="feature-icon">📳</text>
          <view class="feature-content">
            <text class="feature-title">震动提醒</text>
            <text class="feature-desc">支持多种震动模式，确保不会错过</text>
          </view>
        </view>

        <view class="feature-item">
          <text class="feature-icon">🎵</text>
          <view class="feature-content">
            <text class="feature-title">多种铃声</text>
            <text class="feature-desc">经典闹钟、温和提醒、紧急警报、自然鸟鸣</text>
          </view>
        </view>

        <view class="feature-item">
          <text class="feature-icon">🌍</text>
          <view class="feature-content">
            <text class="feature-title">全局监控</text>
            <text class="feature-desc">后台持续监控，跨页面工作</text>
          </view>
        </view>
      </view>
    </view>

    <view class="guide-section">
      <view class="section-title">
        <text class="section-text">❓ 常见问题</text>
      </view>
      <view class="guide-content">
        <view class="faq-item">
          <text class="faq-question">Q: 为什么闹钟不响？</text>
          <text class="faq-answer">A: 请检查后台运行权限，确保应用未被系统清理，并检查闹钟是否已开启。</text>
        </view>

        <view class="faq-item">
          <text class="faq-question">Q: 如何测试震动和铃声？</text>
          <text class="faq-answer">A: 在闹钟列表页面，点击🔧按钮测试震动，点击🎵按钮测试铃声。</text>
        </view>

        <view class="faq-item">
          <text class="faq-question">Q: 重复闹钟如何设置？</text>
          <text class="faq-answer">A: 选择"重复闹钟"类型，然后选择需要重复的星期几。</text>
        </view>
      </view>
    </view>

    <view class="button-container">
      <button class="check-btn" @click="checkPermissions">检查权限状态</button>
      <button class="back-btn" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script>
import backgroundService from "@/utils/backgroundService.js";

export default {
  methods: {
    checkPermissions() {
      const permissions = backgroundService.checkBackgroundPermissions();
      
      let statusText = '当前权限状态：\n\n';
      statusText += `电池优化: ${permissions.batteryOptimization ? '✅ 已优化' : '❌ 需要设置'}\n`;
      statusText += `通知权限: ${permissions.notification ? '✅ 已允许' : '❌ 需要开启'}\n\n`;
      
      if (permissions.batteryOptimization && permissions.notification) {
        statusText += '🎉 权限设置完善，闹钟可以正常工作！';
      } else {
        statusText += '⚠️ 建议按照指南完成权限设置。';
      }
      
      uni.showModal({
        title: '权限检查结果',
        content: statusText,
        confirmText: '知道了',
        showCancel: false
      });
    },
    
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f6f8fb;
  padding: 30rpx;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 40rpx;
  font-weight: 600;
  color: #333;
}

.guide-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  margin-bottom: 25rpx;
}

.section-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.guide-content {
  line-height: 1.6;
}

.guide-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 25rpx;
  display: block;
}

.step-item {
  display: flex;
  margin-bottom: 25rpx;
  align-items: flex-start;
}

.step-number {
  width: 50rpx;
  height: 50rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 600;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.step-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.feature-item {
  display: flex;
  margin-bottom: 25rpx;
  align-items: center;
}

.feature-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
  width: 60rpx;
  text-align: center;
}

.feature-content {
  flex: 1;
}

.feature-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}

.feature-desc {
  font-size: 26rpx;
  color: #666;
}

.faq-item {
  margin-bottom: 25rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.faq-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.faq-question {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.faq-answer {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.button-container {
  display: flex;
  gap: 20rpx;
}

.check-btn {
  flex: 1;
  background-color: #007aff;
  color: #fff;
  border-radius: 25rpx;
  padding: 20rpx;
  font-size: 30rpx;
}

.back-btn {
  flex: 1;
  background-color: #666;
  color: #fff;
  border-radius: 25rpx;
  padding: 20rpx;
  font-size: 30rpx;
}
</style>